<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
	<h:head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet"
			href="${request.contextPath}/resources/css/style.css" type="text/css"
			media="screen" />
		<link rel="stylesheet"
			href="${request.contextPath}/resources/css/styleButton.css"
			type="text/css" media="screen" />
		<link rel="shortcut icon"
			href="${request.contextPath}/resources/img/favicon.ico" />
		<title><ui:insert name="title"></ui:insert></title>
	</h:head>
	<h:body>
		<div id="page">
			<div id="menu">
				<ui:insert name="header">
					<center>
						<ui:include src="/template/commonHeader.xhtml" />
					</center>
				</ui:insert>
			</div>
			<div id="line" />
			<div id="content">
				<br />
				<h:form id="formIndexLesson">
					<p:commandButton value="&nbsp;#{Button.add_new_lessons}"
						styleClass="addButton" update=":formAddLesson:panelAdd"
						action="#{lessonController.preparedAddLesson()}"
						oncomplete="dialogAdd.show();" />
				</h:form>
				<br />
				<!-- List Lessons -->
				<h:form id="formListLesson">
					<p:dataTable id="listDatatable" var="lessonList"
						value="#{lessonController.lessonList}"
						style="width:90%; padding-top: 3px; padding-bottom: 10px; padding-left: 5%;  vertical-align: top;"
						paginator="true" rows="12"
						paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
						paginatorPosition="bottom" rowsPerPageTemplate="6,12,24,36"
						selection="#{lessonController.lesson}"
						rowKey="#{lessonList.lesson_code}" selectionMode="single"
						widgetVar="lessonTable"
						emptyMessage="No Lesson found with given criteria"
						filteredValue="#{lessonController.filterLesson}"
						draggableColumns="false" resizableColumns="true">
						<p:ajax event="rowSelect"
							listener="#{lessonController.onRowSelect}"
							update=":formListLesson:panelList"
							oncomplete="lessonDialog.show()" />

						<p:column sortBy="#{lessonList.lesson_name}"
							filterBy="#{lessonList.lesson_name}" headerText="LESSON NAME">
							<h:outputText value="#{lessonList.lesson_name}" />
						</p:column>

						<p:column headerText="LESSON CODE">
							<h:outputText value="#{lessonList.lesson_code}" />
						</p:column>


						<p:column headerText="SEMESTER"
							sortBy="#{lessonList.semesters.semester_name}"
							filterBy="#{lessonList.semesters.semester_name}">
							<h:outputText value="#{lessonList.semesters.semester_name}" />
						</p:column>

						<p:column style="width:8%" headerText="EDIT | DELETE">
							<p:commandButton update=":formEditLesson:panelEditGrid"
								oncomplete="lessonEditDialog.show()" icon="ui-icon-wrench"
								title="Edit"
								action="#{lessonController.preparedUpdateLesson(lessonList.lesson_id)}" />&nbsp;&nbsp;
		                    <p:commandButton
								update=":formDeleteLesson:dialogDelete"
								action="#{lessonController.preparedDeleteLesson(lessonList.lesson_id)}"
								oncomplete="dialogDelete.show();" icon="ui-icon-trash"
								title="Delete" />
						</p:column>

					</p:dataTable>

					<p:dialog header="Lesson Detail" widgetVar="lessonDialog"
						resizable="false" showEffect="explode" hideEffect="explode"
						styleClass="dialogback">
						<h:panelGrid id="panelList" columns="2" cellpadding="4">

							<f:facet name="header">
								<h:outputText value="#{lessonController.lesson.lesson_name}"
									style="font-weight:bold" />
							</f:facet>

							<h:panelGroup>
								<h:outputText value="Lesson Code  " />
								<h:outputText style="color:red; float: right" value=" : " />
							</h:panelGroup>
							<h:outputText value="#{lessonController.lesson.lesson_code}"
								style="font-weight:bold" />

							<h:panelGroup>
								<h:outputText value="Semester " />
								<h:outputText style="color:red; float: right" value=" : " />
							</h:panelGroup>
							<h:outputText
								value="#{lessonController.lesson.semesters.semester_name}"
								style="font-weight:bold" />

							<h:panelGroup>
								<h:outputText value="Credit " />
								<h:outputText style="color:red; float: right" value=" : " />
							</h:panelGroup>
							<h:outputText value="#{lessonController.lesson.credit}"
								style="font-weight:bold" />

							<h:panelGroup>
								<h:outputText value="Hour " />
								<h:outputText style="color:red; float: right" value=" : " />
							</h:panelGroup>
							<h:outputText value="#{lessonController.lesson.hour}"
								style="font-weight:bold" />

							<h:panelGroup>
								<h:outputText value="Quota " />
								<h:outputText style="color:red; float: right" value=" : " />
							</h:panelGroup>
							<h:outputText value="#{lessonController.lesson.quota}"
								style="font-weight:bold" />
						</h:panelGrid>
					</p:dialog>
				</h:form>


				<!-- Add New Lesson -->
				<h:form id="formAddLesson">
					<p:dialog header="Add New Lesson" id="dialogAdd"
						widgetVar="dialogAdd" resizable="false" modal="true"
						showEffect="fade" hideEffect="explode">
						<p:growl id="growlAdd" showDetail="true" sticky="true" />
						<h:panelGrid id="panelAdd" columns="2" style="margin:0 auto;">

							<h:panelGroup>
								<h:outputText value="Lesson Name  " />
								<h:outputText style="color:red; float: right" value=" * " />
							</h:panelGroup>
							<h:inputText value="#{lessonController.lesson.lesson_name}"
								style="font-weight:bold" required="true"
								requiredMessage="Lesson Name value is required" />

							<h:panelGroup>
								<h:outputText value="Lesson Code  " />
								<h:outputText style="color:red; float: right" value=" * " />
							</h:panelGroup>
							<h:inputText value="#{lessonController.lesson.lesson_code}"
								style="font-weight:bold" required="true" />

							<h:panelGroup>
								<h:outputText value="Credit  " />
								<h:outputText style="color:red; float: right" value=" * " />
							</h:panelGroup>
							<h:inputText value="#{lessonController.lesson.credit}"
								style="font-weight:bold" required="true" />

							<h:panelGroup>
								<h:outputText value="Hour  " />
								<h:outputText style="color:red; float: right" value=" * " />
							</h:panelGroup>
							<h:inputText value="#{lessonController.lesson.hour}"
								style="font-weight:bold" required="true" />

							<h:panelGroup>
								<h:outputText value="Quota  " />
								<h:outputText style="color:red; float: right" value=" * " />
							</h:panelGroup>
							<h:inputText value="#{lessonController.lesson.quota}"
								style="font-weight:bold" required="true" />


							<h:panelGroup>
								<h:outputText styleClass="outputText" value="Semester : " />
								<h:outputText style="color:red; float: right" value=" * " />
							</h:panelGroup>
							<p:selectOneMenu value="#{lessonController.lesson.semesters}"
								requiredMessage="Semester cannot be null" required="true"
								style="width:180px;" filterMatchMode="startsWith" effect="fold"
								converter="semesterIdConverter">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{semesterController.listSemester}"
									var="semesterList" itemLabel="#{semesterList.semester_name}"
									itemValue="#{semesterList}" />
							</p:selectOneMenu>

						</h:panelGrid>
						<p:separator />
						<p:separator />
						<p:commandButton value="&nbsp;#{Button.add_button}"
							update=":formListLesson:listDatatable, growlAdd, dialogAdd"
							actionListener="#{lessonController.save}"
							oncomplete="dialogAdd.hide()" icon="ui-icon-disk" />&nbsp;&nbsp;
                	<p:commandButton value="&nbsp;#{Button.cancel_button}"
							update=":formListLesson:listDatatable"
							oncomplete="dialogAdd.hide()" icon="ui-icon-circle-close" />
					</p:dialog>
				</h:form>

				<h:form id="formEditLesson">
					<p:dialog header="Edit Lesson Informatiom" id="lessonEditDialog"
						widgetVar="lessonEditDialog" resizable="true" modal="true"
						showEffect="explode" hideEffect="explode">
						<p:growl id="growlEdit" showDetail="true" sticky="true" />
						<h:panelGrid id="panelEditGrid" columns="2" cellpadding="4">

							<h:panelGroup>
								<h:outputText value="Lesson Name  " />
								<h:outputText style="color:red; float: right" value=" * " />
							</h:panelGroup>
							<h:inputText value="#{lessonController.lesson.lesson_name}"
								style="font-weight:bold" required="true"
								requiredMessage="Lesson Name value is required" />

							<h:panelGroup>
								<h:outputText value="Lesson Code  " />
								<h:outputText style="color:red; float: right" value=" * " />
							</h:panelGroup>
							<h:inputText value="#{lessonController.lesson.lesson_code}"
								style="font-weight:bold" required="true" />

							<h:panelGroup>
								<h:outputText value="Credit  " />
								<h:outputText style="color:red; float: right" value=" * " />
							</h:panelGroup>
							<h:inputText value="#{lessonController.lesson.credit}"
								style="font-weight:bold" required="true" />

							<h:panelGroup>
								<h:outputText value="Hour  " />
								<h:outputText style="color:red; float: right" value=" * " />
							</h:panelGroup>
							<h:inputText value="#{lessonController.lesson.hour}"
								style="font-weight:bold" required="true" />

							<h:panelGroup>
								<h:outputText value="Quota  " />
								<h:outputText style="color:red; float: right" value=" * " />
							</h:panelGroup>
							<h:inputText value="#{lessonController.lesson.quota}"
								style="font-weight:bold" required="true" />

							<h:panelGroup>
								<h:outputText styleClass="outputText" value="Semester : " />
								<h:outputText style="color:red; float: right" value=" * " />
							</h:panelGroup>
							<p:selectOneMenu value="#{lessonController.lesson.semesters}"
								requiredMessage="Semester cannot be null" required="true"
								style="width:180px;" filterMatchMode="startsWith" effect="fold"
								converter="semesterIdConverter">
								<f:selectItem itemLabel="Select One"
									itemValue="#{lessonController.lesson.semesters}" />
								<f:selectItems value="#{semesterController.listSemester}"
									var="semesterList" itemLabel="#{semesterList.semester_name}"
									itemValue="#{semesterList}" />
							</p:selectOneMenu>

						</h:panelGrid>
						<p:separator />
						<p:separator />
						<p:commandButton value="&nbsp;#{Button.update_btn}"
							update=":formListLesson:listDatatable, growlEdit, lessonEditDialog"
							actionListener="#{lessonController.update}"
							oncomplete="dialogAdd.hide()" icon="ui-icon-disk" />&nbsp;&nbsp;
                	<p:commandButton value="&nbsp;#{Button.cancel_button}"
							update=":formListLesson:listDatatable"
							oncomplete="dialogAdd.hide()" icon="ui-icon-circle-close" />
					</p:dialog>
				</h:form>


				<h:form id="formDeleteLesson">
					<p:growl id="growlDelete" sticky="true" />
					<p:confirmDialog id="dialogDelete"
						message="Are you sure about deleting the field?"
						header="Initializing destroy process" severity="alert"
						widgetVar="dialogDelete">
						<p:commandButton value="&nbsp;#{Button.delete_btn}"
							update=":formListLesson:listDatatable, growlDelete"
							actionListener="#{lessonController.remove}"
							oncomplete="dialogDelete.hide();" icon="ui-icon-trash" />&nbsp;&nbsp;
	                	<p:commandButton value="&nbsp;#{Button.cancel_button}"
							update=":formListLesson:listDatatable"
							oncomplete="dialogDelete.hide();" icon="ui-icon-circle-close" />

					</p:confirmDialog>
				</h:form>

			</div>
			<div id="line" />
			<br />
			<div id="footer">
				<ui:insert name="footer">
					<ui:include src="/template/commonDock.xhtml" />
				</ui:insert>
			</div>
		</div>
	</h:body>
</f:view>
</html>
